<template>
    <div>
        <!-- 输入框和按钮 -->
        <a-input placeholder="船MMSI" v-model="MMSI" style="width: 200px;"></a-input>
        <a-range-picker v-model="selectedDates" :placeholder="['开始日期', '结束日期']" format="YYYY-MM-DD"
            style="margin-left: 10px; width: 350px;" />
        <a-button @click="getData" style="margin-left: 10px;">查询</a-button>

        <!-- 弹出模态框 -->
        <j-modal :visible="visible" switchFullscreen @ok="handleOk" @cancel="handleCancel"
            cancelText="关闭" width="1200px">
            <Map v-if="trackArray && parkArray" :trackArray="trackArray" :parkArray="parkArray"
                class="canvasImgObj"></Map>
        </j-modal>
    </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';
import Map from './Map.vue';

export default {
    components: {
        Map,
    },
    data() {
        return {
            trackArray: undefined, // 轨迹数据
            parkArray: undefined, //停靠数据
            key: "b25492627aab4b0a97f317ef29b82a07", // API 密钥
            url: {
                getShipTrack: "/tankerRegistration/tankerRegistration/getShipTrack",
            },
            visible: false, // 模态框是否可见
            MMSI: "", // 船舶 MMSI
            selectedDates: [], // 用户选择的日期范围
        };
    },
    methods: {
        getData() {
            if (!this.MMSI) {
                this.$message.error("请输入船MMSI");
                return;
            }

            if (this.selectedDates.length !== 2) {
                this.$message.error("请选择完整的日期范围");
                return;
            }
            // 格式化开始时间和结束时间
            const beginDate = moment(this.selectedDates[0]).format("YYYY-MM-DD") + " 00:00:00";
            const endDate = moment(this.selectedDates[1]).format("YYYY-MM-DD") + " 23:59:59";

            // 将格式化后的日期转换为 10 位时间戳
            const beginTime = Math.floor(moment(beginDate).valueOf() / 1000);
            const endTime = Math.floor(moment(endDate).valueOf() / 1000);
            this.getPortOfCallByShip(beginTime, endTime)
            this.getShipTrack(beginTime, endTime)
        },
        getPortOfCallByShip(beginTime, endTime) {
            let url =
                "http://api.shipxy.com/apicall/GetPortOfCallByShip?v=2&timetype=2" +
                "&k=" +
                this.key +
                "&mmsi=" +
                this.MMSI +
                "&begin=" +
                beginTime +
                "&end=" +
                endTime;
            axios.get(url).then((res) => {
                console.log(res)
                if (200 == res.status) {
                    let data = res.data
                    if (0 == data.status) {
                        this.parkArray = data.records
                    } else {
                        this.$message.error("数据解析失败，请稍后再试");
                    }
                } else {
                    this.$message.error("请求失败，请检查网络或参数");
                }
            })
        },
        // 获取船舶轨迹
        getShipTrack(beginTime, endTime) {

            // 构造请求 URL
            let url =
                "http://api.shipxy.com/apicall/GetShipTrack?enc=1&cut=0" +
                "&k=" +
                this.key +
                "&id=" +
                this.MMSI +
                "&btm=" +
                beginTime +
                "&etm=" +
                endTime;

            // 发起请求
            axios.get(url).then((res) => {
                if (res.status === 200) {
                    let data = res.data;
                    console.log(res)
                    if (0 == data.status) {
                        this.trackArray = data.points;
                        this.visible = true;
                    } else {
                        this.$message.error("数据解析失败，请稍后再试");
                    }
                } else {
                    this.$message.error("请求失败，请检查网络或参数");
                }
            });
        },

        // 确认按钮事件
        handleOk() {
            this.visible = false;
        },

        // 取消按钮事件
        handleCancel() {
            this.visible = false;
        },
    },
};
</script>

<style lang="less" scoped>
</style>